{{ template "admin.layout.html" . }}

{{ define "title" }}Admin - Ingredients{{ end }}

{{ define "page" }}

  <div class="m-4 md:m-8">
    <h1>Admin - Recipe</h1>

    <hgroup
      class="sticky top-0 mb-4 flex w-full items-center justify-between bg-white"
    >
      <h2 class="mb-4 text-3xl font-bold">{{ .Recipe.Name }}</h2>
      <div class="flex justify-between gap-2 md:gap-4">
        <a class="btn btn-secondary" href="/recipes/{{ .Recipe.ID }}">
          See
        </a>
        <button class="btn btn-primary" form="myform">Save</button>
      </div>
    </hgroup>

    <form
      id="myform"
      class="form"
      method="POST"
      action="/admin/recipes/edit?id={{ .Recipe.ID }}"
    >
      <label class="label">
        Name
        <input
          type="text"
          name="name"
          required
          placeholder="Name"
          class="input"
          value="{{ .Recipe.Name }}"
        />
      </label>

      <label class="label">
        Description
        <input
          class="input"
          name="description"
          placeholder="Description"
          value="{{ .Recipe.Description }}"
        />
      </label>

      <label class="label">
        Instructions
        <textarea
          class="input"
          name="instructions"
          rows="8"
          placeholder="- Etape 1
- Etape 2"
        >
{{ .Recipe.Instructions }}</textarea
        >
      </label>
    </form>

    <section id="ingredients-section">
      <h2 class="mb-2 text-2xl font-bold">Ingredients</h2>

      <ul class="list-disc pl-4">
        {{ range .Ingredients }}
          <li class="mb-1">
            <span>{{ .Ingredient.Name }}</span>
            {{ if ne .Unit "unit" }}
              : <span class="font-semibold">{{ .Quantity }}</span>{{ if .Unit }}
                {{ .Unit }}
              {{ end }}
            {{ end }}
          </li>
        {{ end }}
      </ul>

      <form
        method="POST"
        class="form"
        action="/admin/dosings/new"
        hx-boost="true"
        hx-target="#ingredients-section"
        hx-select="#ingredients-section"
      >
        <input type="hidden" name="RecipeID" value="{{ .Recipe.ID }}" />

        <div class="flex w-full items-end gap-2 md:gap-4">
          <label class="label">
            Name
            <select
              name="IngredientID"
              class="input"
              hx-get="/ingredients/preselect-unit"
              hx-trigger="change"
              hx-target="#unit"
              hx-select="#unit"
              hx-swap="outerHTML"
            >
              <option value="" selected>-</option>
              {{ range .AllIngredients }}
                <option value="{{ .ID }}">{{ .Name }}</option>
              {{ end }}
            </select>
          </label>

          <label class="label">
            Quantity
            <input class="input" type="number" name="quantity" />
          </label>

          <label class="label">
            Unit
            <select
              id="unit"
              name="unit"
              class="input"
              style="min-width: 5rem;"
            >
              {{ range .Units }}
                <option value="{{ . }}">{{ . }}</option>
              {{ end }}
            </select>
          </label>

          <label class="label">
            Optional
            <div class="flex items-center justify-center">
              <input type="checkbox" name="" />
            </div>
          </label>
          <button class="btn btn-primary aspect-square">+</button>
        </div>
      </form>
    </section>
  </div>
{{ end }}
